<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>其他事件</title>
  <style>
    .mouse {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .res {
      width: 176px;
      border: 1px solid #000;
      display: none;
    }
  </style>

</head>

<body>
  <div class="mouse">鼠标经过事件</div>

  <input type="text" name="" id="">
  <div class="res">
    <ul>
      <li><a href="https://www.baidu.com">11</a></li>
      <li><a href="">11</a></li>
      <li><a href="">11</a></li>
      <li><a href="">11</a></li>
      <li><a href="">11</a></li>
      <li><a href="">11</a></li>
      <li><a href="">11</a></li>
    </ul>
  </div>
  <script>
    /*
      鼠标点击事件
      mouseenter 鼠标经过
      mouseleave 鼠标离开

      焦点事件
      表单获取焦点:focus
      表单失去焦点:blue

      键盘事件
      keydown 键盘按下
      keyup   键盘抬起

      文本事件
      表单输入事件
      input 用户输入事件
    */
    document.querySelector('.mouse').addEventListener('mouseenter', function () {
      console.log('鼠标经过');
    })

    document.querySelector('.mouse').addEventListener('mouseleave', function () {
      console.log('鼠标离开');
    })

    // 鼠标获取光标
    const re = document.querySelector('.res')
    document.querySelector('input').addEventListener('focus', function () {
      // console.log(1);
      re.style.display = 'block'
    })

    document.querySelector('input').addEventListener('blur', function () {
      // console.log(1);
      // re.style.display = 'none'
    })

    // 键盘事件
    document.querySelector('input').addEventListener('keydown', function () {
      console.log('键盘按下');
    })

    document.querySelector('input').addEventListener('keyup', function () {
      console.log('键盘抬起');
    })

    const input = document.querySelector('input')
    input.addEventListener('input', function () {
      console.log(input.value);
    })
  </script>
</body>

</html>